<template>
  <div class="mail-dialog">
    <el-dialog :visible.sync="dialogVisible" width="850px"
               :close-on-click-modal="false" :close-on-press-escape	='false'
               :title="form.id?'编辑模板':'新增模板'" center>
     <div style="max-height:500px;">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px" @keyup.enter.native="()=>{}">
         <el-form-item label="模板内容" prop="htmlContent" >
           <div class="edit" >
             <!--替换
              <Editor ref="childEdit" :height="300" :catchData="getContent" :htmlContent="form.htmlContent"></Editor>
             -->
             <UE :config="config" ref="childEdit" :catchData="getContent" :htmlContent="form.htmlContent"></UE>
           </div>
         </el-form-item>
         <el-form-item label="模板名称" prop="htmlName">
           <el-input v-model="form.htmlName" placeholder="请输入模板名称"></el-input>
         </el-form-item>
       </el-form>
     </div>
      <!-- 底部按钮-->
      <div slot="footer" class="dialog-footer" align="right">
        <el-button  size="mini" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveInfo" size="mini" @keyup.enter.native="()=>{}">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {update, save} from "@/api/mail/admin/mail-sign";
    import Editor from '@/components/common'
    import UE from '@/components/ueditor/ue'

    export default {
        name: "MailTempDialog",
        props: [],
        components: {
            Editor,UE
        },
        data() {
            return {
                dialogVisible: false,
                form: {
                    id: '',
                    htmlContent: '',
                    htmlName: '',
                    htmlType: '2'
                },
                rules: {
                    htmlContent: [
                        {required: true, message: '请设置模板内容', trigger: 'blur'},
                    ],
                    htmlName: [
                        {required: true, message: '请输入签名名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                },
                config: {
                    initialFrameHeight: 300
                },
            }
        },
        methods: {
            init(row) {
                if(this.$refs['form']){
                    this.$refs['form'].resetFields();
                }
                if (JSON.stringify(row) != '{}') {//编辑
                    this.form = Object.assign({}, row);
                    this.form.htmlType = 2;
                    //待处理
                    this.$nextTick(() => {
                        this.$refs.childEdit.reset();
                        this.$refs.childEdit.getInit(this.form.htmlContent)
                    })
                }else{
                    if( this.$refs.childEdit){
                        this.$refs.childEdit.reset();
                    }
                }
                this.dialogVisible = true;
            },
            getContent: function (content) {
                this.form.htmlContent = content;
            },
            saveInfo() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.form.htmlContent = encodeURIComponent(this.form.htmlContent);
                        if (this.form.id) {//编辑
                            update(this.form).then(res => {
                                this.dealEnd(res)
                            }).catch(err => {
                                this.form.htmlContent = decodeURIComponent(this.form.htmlContent);
                            });
                        } else {//保存
                            save(this.form).then(res => {
                                this.dealEnd(res)
                            }).catch(err => {
                                this.form.htmlContent = decodeURIComponent(this.form.htmlContent);
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            cancel(){
                this.form.id='';
                this.form.htmlName=''
                this.$refs.childEdit.reset()
                this.dialogVisible = false
            },
            dealEnd(res) {
                this.form.id='';
                this.form.htmlName=''
                this.$refs['form'].resetFields();
                this.$refs.childEdit.reset()
                this.$message({
                    type: "success",
                    message: res.data.msg
                });
                this.$emit('getData')
                this.dialogVisible = false;
            }
        }
    }
</script>

<style scoped lang="scss">
</style>
